<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no">
    <title></title>

    <script src="https://img.wx.xiao-bo.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <link rel="stylesheet" href="https://img.wx.xiao-bo.com/ajax/libs/vant/2.12.44/index.min.css"/>
    <script src="https://img.wx.xiao-bo.com/ajax/libs/vant/2.12.44/vant.min.js"></script>
    <script src="https://img.wx.xiao-bo.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>


<body>
<!--<div class="weui-msg">-->
<!--    <div class="weui-msg__icon-area">-->
<!--        <img src="https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_appwx_logo.png">-->
<!--    </div>-->
<!--    <div class="weui-msg__text-area">-->
<!--        <h2 class="weui-msg__title">微信授权</h2>-->
<!--    </div>-->
<!--    <a style="width: 250px;" href="javascript:;" class="weui-btn weui-btn_primary">-->
<!--        微信公众号登陆授权-->
<!--    </a>-->
<!--</div>-->
<div class="app" id="app">
    <van-form validate-first style="width: 400px;margin: 10% auto;">
        <div style="margin-top: 36px;text-align: center;">
            <img src="https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_appwx_logo.png">
            <h3>微信开放平台授权</h3>
        </div>
        <van-field name="wxapp" label=" ">
            <template #input>
                <van-radio-group v-model="wxapp" direction="horizontal">
                    <van-radio name="0">公众号</van-radio>
                    <van-radio name="1">小程序</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <div style="margin: 16px;">
            <van-button round block type="primary" @click="openOauth">前往授权</van-button>
        </div>
    </van-form>
</div>
</body>
</html>

<script>
    //请求拦截器
    axios.interceptors.request.use(function (request)
    {
        console.log("request ok")
        g_vue.loading(true);
        //请求成功的拦截
        return request

    }), function (error)
    {
        return Promise.reject(error)
    }

    //响应拦截器
    axios.interceptors.response.use(function (response)
    {
        //请求成功的拦截
        console.log("response ok")
        g_vue.loading(false);
        return response

    }), function (error)
    {
        return Promise.reject(error)
    }

    // 创建vue方法
    g_vue = new Vue({
        el: "#app",
        data: {
            wxapp: "0",
        },
        mounted: function ()
        {
            // let page = this;
            // page.loading(true);
            // setTimeout(() =>
            // {
            //     page.loading(false);
            // }, 3000)
        },
        methods: {
            openOauth()
            {
                let url = '/wx_open/server/oauth';
                let data = {
                    wxapp: this.wxapp,
                };
                return new Promise((resolve, reject) =>
                {
                    axios({
                        method: "GET",
                        params: data,
                        url,
                    }).then((res) =>
                    {
                        console.log(res);
                        if (res.data.errcode === 0)
                        {
                            location.href = res.data.url;
                        }
                        else
                        {
                            this.alert(res.data.errmsg);
                        }
                    }).catch(async (err) =>
                    { //出错才会运行
                        console.warn('func_get catch 00', err.name, err.message)
                        // console.warn(JSON.stringify(err))
                        this.alert(JSON.stringify(err));
                    });
                });
            },
            alert(msg)
            {
                vant.Dialog({title: '提示', message: msg});
            },
            loading(show)
            {
                if (show)
                {
                    vant.Toast.loading({
                        duration: 0, // 持续展示 toast
                        message: '加载中...',
                        forbidClick: true,
                    });
                }
                else
                {
                    vant.Toast.clear();
                }
            },
        }
    })
    Vue.use(vant.Dialog);
    Vue.use(vant.Toast);
    Vue.use(vant.Lazyload);
    Vue.use(vant.Form);
    Vue.use(vant.Field);
    Vue.use(vant.Button);
    Vue.use(vant.Radio);
    Vue.use(vant.RadioGroup);
</script>